{% include "data/template-ui.html" %}
{% load staticfiles %}
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'css/datatables/foundation.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/datatables/dataTables.bootstrap4.min.css' %}" />
<!-- <link rel="stylesheet" type="text/css" href="{% static 'css/datatables/dataTables.foundation.min.css' %}"/> -->
<!-- <link rel="stylesheet" type="text/css" href="{% static 'css/datatables/jquery.dataTables.css' %}"/> -->
<link rel="stylesheet" type="text/css" href="{% static 'css/datatables/fixedHeader.foundation.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/datatables/buttons.foundation.min.css' %}" />
<!-- <link rel="stylesheet" type="text/css" href="{% static 'css/datatables/datatables-site.css' %}"/> -->

<style>
    .button-group .button {
        font-size: 12px;
        padding: 4px 10px;
    }

    .table-bordered thead td,
    .table-bordered thead th {
        border-bottom-width: 1px !important;
    }

    .container-fluid {
        padding: 0 10 0;
    }

    table {
        font-size: 14px;
    }
</style>

<div class="page-wrapper">
    <div class="container-fluid animated fadeInUp">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <!-- 标题 -->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card-title">
                                <h4 class="text-primary">数据质量检核报告</h4>
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                    style="border-radius: 4px;">
                                    当前显示季度:{{ quarter }} <span class="caret"></span></button>
                                <ul class="dropdown-menu" role="menu">
                                    {% for quarter_list in db_quarter_list %}
                                    <li><a href="?name={{ company }}&quarter={{ quarter_list }}">{{ quarter_list }}</a>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- 正文 -->
                    <div class="card-content">
                        <table id="example" class="table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>行号</th>
                                    <th>系统</th>
                                    <th>数据标准</th>
                                    <th>目标表</th>
                                    <th>是否风险集市</th>
                                    <th>问题分类</th>
                                    <th>报送SQL</th>
                                    <th>报送数据量</th>
                                    <th>问题数据量</th>
                                    <th>问题占比</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for i in result_tab %}
                                <tr>
                                    <td>{{ i.0 | default_if_none:"" }}</td>
                                    <td>{{ i.1 | default_if_none:"" }}</td>
                                    <td data-toggle="popover" id="{{ i.2 }}">{{ i.2 | default_if_none:"" }}</td>
                                    <td>{{ i.3 | default_if_none:"" }}</td>
                                    <td>{{ i.4 | default_if_none:"" }}</td>
                                    <td>{{ i.5 | default_if_none:"" }}</td>
                                    <td>{{ i.6 | default_if_none:"" }}</td>
                                    <td>{{ i.7 | default_if_none:"" }}</td>
                                    <td>{{ i.8 | default_if_none:"" }}</td>
                                    <td>{{ i.9 | default_if_none:"" }}</td>
                                    <td>{{ i.10| default_if_none:"" }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- <footer class="footer"> © 2019 广东粤财控股投资有限公司</footer> -->


<!-- Jquery -->
<script src="{% static 'js/lib/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{% static 'js/lib/bootstrap/js/popper.min.js' %}"></script>
<script src="{% static 'js/lib/bootstrap/js/bootstrap.min.js' %}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{% static 'js/jquery.slimscroll.js' %}"></script>
<!--Menu sidebar -->
<script src="{% static 'js/sidebarmenu.js' %}"></script>
<!--stickey kit -->
<script src="{% static 'js/lib/sticky-kit-master/dist/sticky-kit.min.js' %}"></script>
<script src="{% static 'js/custom.min.js' %}"></script>

<!-- DataTables JS -->
<script type="text/javascript" src="{% static 'js/DataTables/DataTables-1.10.18/js/jquery.dataTables.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DataTables/DataTables-1.10.18/js/dataTables.foundation.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DataTables/ColReorder-1.5.0/js/dataTables.colReorder.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DataTables/Buttons-1.5.6/js/dataTables.buttons.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DataTables/Buttons-1.5.6/js/buttons.foundation.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DataTables/Buttons-1.5.6/js/buttons.html5.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DataTables/Buttons-1.5.6/js/buttons.print.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DataTables/Buttons-1.5.6/js/buttons.colVis.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DataTables/JSZip-2.5.0/jszip.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DataTables/pdfmake-0.1.36/pdfmake.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DataTables/pdfmake-0.1.36/vfs_fonts.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DataTables/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js' %}"></script>

<script type="text/javascript" class="init">
    $(document).ready(function () {
        var table = $('#example').DataTable({
            paging: false,
            fixedHeader: true, // 固定表头
            colReorder: true, // 可拖动列
            stateSave: true,
            buttons: [{
                    'extend': 'copy',
                    'text': '复制',
                    'className': 'btn btn-primary',
                },
                {
                    'extend': 'excel',
                    'text': '导出Excel',
                    'className': 'btn btn-primary',
                },
                {
                    'extend': 'colvis',
                    'text': '隐藏列',
                    'className': 'btn btn-primary',
                },
            ],
            "language": {
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sSearch": "搜索:",
            },

            "createdRow": function (row, data, dataIndex) {
                if (Number(data[9].replace(/\%/g, '')) > 50) { //对第9列问题占比，大于50则把表格最后一列'td:eq(-2)'标红
                    $('td:eq(-2)', row).css('color', 'red');
                }
            },
        });

        table.buttons().container().appendTo('#example_wrapper .small-6.columns:eq(0)');
    });

    $(function() {
        $("[data-toggle='popover']").popover({
            html : true,
            placement: "right",
            trigger: "hover focus",
            container: "body",
            title: "业务定义与业务规则",
            delay:{show:100, hide:200},
            content: function() {
                var value = $(this).attr("id");
                return content(value);
            }
        });
    });

    //加载内容
    function content(value) {
        var hover_data;
        $.ajax({
            type : "GET",
            async : false,
            url : "../../api/datastandard/query",
            data: {
                std_name: value,    //标准名
                std_type: "detail"
            },
            dataType : "json",
            success : function(result) {
                hover_data = $("<form><ul>" + 
                               "<li><font style=\"font-weight:600;\">业务定义：</font>"+ result.business_definition +"</li>" +
                               "<li style=\"padding-top:10px;\"><font style=\"font-weight:600;\">业务规则：</font>" + result.business_rule + "</form>");
            },
        })
        return hover_data;
    }
</script>

</body>

</html>